<template>
  <div class="home">
    <div class="box">
        <my-top></my-top>
        <div class="list">
            <!-- :item  :index 是自定义属性  父传子   -->
           <myList v-for="(item,index) in list" :key="index" :item="item" :index="index"></myList>
        </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import myTop from '@/components/myTop.vue'
import myList from '@/components/myList.vue'
import {computed,ref,reactive,toRefs} from 'vue'
import {useStore} from 'vuex'

export default {
setup(props) {
    const {state} = useStore()
    const data = reactive({
    })
    const list = computed(()=>state.list)


    return {list,...toRefs(data)}
},
  components: {
    myTop,
    myList
  }
}
</script>
<style lang="scss" scoped>
.box{
    width:1000px;
    margin: 50px auto;
    border: 1px solid #c00;
    padding: 30px;
    .list{
        padding: 20px;
    }
}
</style>

